<template>
  <view class="cardView">
    <view class="cardView_item" @click="handleRouter()">
      <view class="cardView_item_left">
        <img-oss width="140rpx" height="140rpx" border-radius="8rpx"></img-oss>
      </view>
      <view class="cardView_item_right">
        <view class="cardView_item_right-top">小儿推拿</view>
        <view class="cardView_item_right-center">小儿推拿适用于3-5岁</view>
        <view class="cardView_item_right-bottom">
          <view class="custom_button">
            <nut-button plain type="info">立即预约</nut-button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  name: 'cardView',
  props: {
    title: {
      type: String,
      default: ''
    },
    desc: {
      type: String,
      default: ''
    },
    icon: {
      type: String,
      default: '',
    }
  },
  methods: {
    handleRouter() {
      uni.navigateTo({
        url: '/pages/project/project_detail'
      })
    }
  },
}
</script>
<style scoped lang="scss">
.cardView {

  &_item {
    box-sizing: border-box;
    padding: 20rpx;
    display: flex;
    background: #fff;
    border-radius: 16rpx;
    box-shadow: 0 0 20rpx 0 rgba(76, 156, 234, 0.1);

    & + .cardView_item {
      margin-top: 20rpx;
    }

    &_left {
      flex-shrink: 0;
      width: 140rpx;
    }

    &_right {
      margin-left: 20rpx;
      flex: 1;
      display: flex;
      flex-direction: column;

      &-top {
        font-size: 32rpx;
        font-weight: 500;
      }

      &-center {
        margin-top: auto;
        font-size: 20rpx;
        font-weight: 400;
        color: #979797;
      }

      &-bottom {
        height: 48rpx;
        display: flex;
        justify-content: flex-end;
      }
    }
  }
}
</style>